<template>
  <div class="upload-cover">
    <div class="upload-wrap" @click="dialogVisible = true">
      <img class="upload-img" src="" ref="img" style="display:block" />
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
    >
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="上传图片" name="second">
               <input type="file" ref="file" @change="onFileChange" hidden/>
            <div class="dialog" @click="$refs.file.click()">
               <i v-if="!preview" class="avatar-uploader-icon">+</i>
                <img :src="preview" class="preview"/>
            </div>
        </el-tab-pane>
        <el-tab-pane label="素材库" name="first">

          <material />
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onCoverConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "uploadCover",
  components:{
 
  },
  data() {
    return {
      dialogVisible: false,
      activeName: "second",
      preview: null, //预览图片
      img: null
    };
  },
  methods: {
    onFileChange() {
      //获取文件对象
      const file = this.$refs.file.files[0];
      const blob = window.URL.createObjectURL(file);
      this.preview = blob;
    },
    onCoverConfirm() {
      //在图片上传页
      //如果有input 有 文件才执行上传操作
      if (this.activeName === "second") {
        if (!this.$refs.file.files[0]) {
          this.$message("请选择文件");
          return;
        }
        //展示图片
        this.$refs.img.src = this.preview;
        this.dialogVisible = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.upload-cover {
  display: inline-block;
  margin-right: 15px;
}
.upload-wrap {
  width: 150px;
  height: 120px;
  border: 1px dashed #ccc;
  .upload-img {
    max-width: 100%;
    background-size: cover;
    height: 100%;
  }
}
.dialog{
    width: 34%;
    height: 146px;
    border: 1px solid #ccc;
    margin: auto;
}
 .avatar-uploader-icon {
     display: inline-block;
     position: relative;
    top: -67px;
    left: 64px;
    color: #8c939d;
    font-style: normal;
    font-weight: 100;
    font-size: 40px;
    }
.preview{
    max-width: 100%;
    height: 150px;
    background-size: cover;
}

</style>
